<div nz-row nzType="flex" nzJustify="center">
  <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm(validateForm.value)">
    <nz-form-item>
      <nz-form-label [nzSpan]="7" nzRequired>用户名</nz-form-label>
      <nz-form-control [nzSpan]="12" nzHasFeedback nzValidatingTip="验证中..." [nzErrorTip]="userErrorTpl">
        <input nz-input formControlName="NickName" placeholder="async validate try to write JasonWood" />
        <ng-template #userErrorTpl let-control>
          <ng-container *ngIf="control.hasError('required')">
            Please input your username!
          </ng-container>
          <ng-container *ngIf="control.hasError('duplicated')">
            The username is redundant!
          </ng-container>
        </ng-template>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="7" nzRequired>E-mail</nz-form-label>
      <nz-form-control [nzSpan]="12" nzHasFeedback [nzErrorTip]="emailErrorTpl">
        <input nz-input formControlName="email" placeholder="email" type="email" />
        <ng-template #emailErrorTpl let-control>
          <ng-container *ngIf="control.hasError('email')">
            The input is not valid E-mail!
          </ng-container>
          <ng-container *ngIf="control.hasError('required')">
            Please input your E-mail!
          </ng-container>
        </ng-template>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="7" nzRequired>Password</nz-form-label>
      <div>
        <nz-form-control [nzSpan]="12" nzHasFeedback nzErrorTip="Please input your password!">
          <input nz-input type="password" formControlName="password" (ngModelChange)="validateConfirmPassword()" />
        </nz-form-control>
      </div>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="7" nzRequired>Confirm Password</nz-form-label>
      <nz-form-control [nzSpan]="12" nzHasFeedback [nzErrorTip]="passwordErrorTpl">
        <input nz-input type="password" formControlName="ConfirmPassword" placeholder="confirm your password" />
        <ng-template #passwordErrorTpl let-control>
          <ng-container *ngIf="control.hasError('required')">
            Please confirm your password!
          </ng-container>
          <ng-container *ngIf="control.hasError('confirm')">
            Password is inconsistent!
          </ng-container>
        </ng-template>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="7" nzRequired>Comment</nz-form-label>
      <nz-form-control [nzSpan]="12" nzErrorTip="Please write something here!">
        <textarea formControlName="comment" nz-input rows="2" placeholder="write any thing"></textarea>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-control [nzOffset]="7" [nzSpan]="12">
        <button nz-button nzType="primary" [disabled]="!validateForm.valid">Submit</button>
        <button nz-button (click)="resetForm($event)">Reset</button>
      </nz-form-control>
    </nz-form-item>
  </form>
</div>